<template>
    <div class="min-h-screen bg-white">
      <div class="flex h-full">
        <div class="ml-0 p-8 bg-gray-100" style="min-width: 1080px;padding: 2rem;" >
          <div ref="contentDiv" class="p-6 mx-auto">
            <!-- 搜索区域 -->
            <div class="flex flex-wrap items-center justify-between mb-6 gap-4">
              <el-input
                v-model="searchQuery"
                placeholder="输入学号/姓名/专业搜索"
                class="flex-grow"
              >
                <template #prefix>
                  <el-icon class="el-input__icon"><Search /></el-icon>
                </template>
              </el-input>
              <el-button class="!rounded-button whitespace-nowrap">
                <el-icon class="mr-2"><Filter /></el-icon>
                高级筛选
              </el-button>
              <el-button type="primary" class="!rounded-button whitespace-nowrap">
                <el-icon class="mr-2"><Download /></el-icon>
                导出数据
              </el-button>
            </div>
  
            <!-- 地图区域 -->
            <el-card class="mb-6">
              <template #header>
                <div class="font-medium">毕业生地域分布</div>
              </template>
              <div ref="chartRef" class="w-full h-[400px]"></div>
            </el-card>
  
            <!-- 表格区域 -->
            <el-card>
              <template #header>
                <div class="font-medium">毕业生去向明细</div>
              </template>
              <el-table :data="students" style="width: 100%">
                <el-table-column prop="id" label="学号" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="department" label="院系" />
                <el-table-column prop="major" label="专业" />
                <el-table-column prop="destination" label="毕业去向" />
                <el-table-column prop="company" label="工作单位" />
                <el-table-column prop="location" label="所在地区" />
                <el-table-column prop="salary" label="薪资范围" />
              </el-table>
  
              <!-- 分页 -->
              <div class="flex items-center justify-between px-4 py-3 border-t border-gray-200">
                <div class="flex items-center gap-2">
                  <span class="text-sm text-gray-700">共 {{ total }} 条记录</span>
                </div>
                <el-pagination
                  v-model:currentPage="currentPage"
                  :page-size="10"
                  :total="total"
                  layout="prev, pager, next"
                />
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import 'echarts/extension/bmap/bmap';
  import { User, House, Document, UserFilled, PieChart, Search, Filter, Download } from '@element-plus/icons-vue';
  
  const contentDiv = ref<HTMLElement>();
  const chartRef = ref<HTMLElement>();
  const currentPage = ref(1);
  const total = ref(156);
  const searchQuery = ref('');
  
  const students = ref([
    {
      id: '2021001',
      name: '周雨萱',
      department: '计算机科学与技术学院',
      major: '软件工程',
      destination: '就业',
      company: '腾讯科技（深圳）有限公司',
      location: '广东省深圳市',
      salary: '35k-45k'
    },
    // 更多数据
  ]);
  
  const setContentWidth = () => {
    if (contentDiv.value) {
      const windowWidth = window.innerWidth;
      contentDiv.value.style.width = `${windowWidth * 0.75}px`;
      contentDiv.value.style.marginLeft = `${windowWidth * 0.175}px`;
    }
  };
  
  onMounted(() => {
    setContentWidth();
    window.addEventListener('resize', setContentWidth);
  
    if (chartRef.value) {
      const myChart = echarts.init(chartRef.value);
      const option = {
        animation: false,
        title: {
          text: '2023 届毕业生地域分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          min: 0,
          max: 200,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'],
          calculable: true,
          inRange: {
            color: ['#e0f3f8', '#2171b5']
          }
        },
        series: [
          {
            name: '毕业生人数',
            type: 'map',
            map: 'china',
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { name: '北京', value: 156 },
              { name: '上海', value: 124 },
              { name: '广东', value: 178 },
              { name: '浙江', value: 98 },
              { name: '江苏', value: 87 },
              { name: '四川', value: 65 },
              { name: '湖北', value: 45 },
              { name: '福建', value: 34 }
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
  });
  
  </script>
  
  <style scoped>
  .el-menu {
    border-right: none;
  }
  
  .el-menu-item.is-active {
    background-color: #ecf5ff;
    color: #409eff;
  }
  
  .el-input__inner {
    border: none;
  }
  
  .el-button {
    border-radius: 0.375rem;
  }
  
  .el-card {
    border-radius: 0.5rem;
  }
  
  .el-pagination {
    justify-content: flex-end;
  }
  
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .flex-wrap {
      flex-direction: column;
      align-items: stretch;
    }
  }
  </style>
  